<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2022-05-24 10:19:45
 */
import {useConfig, useStore} from "~/store";
import {isDark} from '~/composables'
import $router from "~/router";
import {$image} from '~/api'

const $store = useStore()
const $config = useConfig()
const layout_header_wrapper_height = computed(() => {
  return `${$config.value.layout.header}px`
})
const layout_header_wrapper_blank_height = computed(() => {
  return `${$config.value.layout.header - 25}px`
})

const logo_size = computed(() => {
  return `${$config.value.layout.logo}px`
})

const logo_menu_wrapper_left = ref(`${($config.value.layout.sider.close - $config.value.layout.logo) / 2}px`)
</script>
<template>
  <div class="logo_wrapper">
    <div @click="$router.push('/')" class="logo_cover_wrapper"></div>
    <div class="logo_container_wrapper">
      <img class="logo_image_wrapper" :class="($config.layout.sider.inverted || isDark)?'logo_image_filter':''"
           :src="$image($store.config.logo)" alt="">
      <n-menu class="logo_menu_wrapper" :indent="12" :inverted="$config.layout.sider.inverted || isDark"
              :icon-size="$config.layout.logo" :collapsed-width="$config.layout.sider.close"
              :value="($config.layout.sider.inverted || isDark)?'logo':''"
              :options="[{label: $store.config.title,key: 'logo'}]"/>
    </div>
  </div>
  <n-divider dashed></n-divider>
</template>
<style>
.logo_wrapper .logo_menu_wrapper {
  --n-item-color-active: #00000000 !important;
}

</style>
<style scoped>
.logo_wrapper .logo_image_filter {
  filter: invert(.9);
}

.logo_wrapper .logo_image_wrapper {
  width: v-bind(logo_size);
  height: v-bind(logo_size);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: v-bind(logo_menu_wrapper_left);
}

.logo_container_wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: v-bind(layout_header_wrapper_height);
}

.logo_menu_wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(-50%);
}

.logo_cover_wrapper {
  position: absolute;
  cursor: pointer;
  top: 0;
  height: v-bind(layout_header_wrapper_height);
  left: 0;
  right: 0;
  z-index: 2;
}

.logo_wrapper {
  position: relative;
  height: v-bind(layout_header_wrapper_blank_height);
}
</style>
